<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		
		<style>		
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			/*以下css为右上角弹出二维码等*/
			#topPopover {
				width: 100px;
				height: 150px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}	
			.mui-popover {
				height: 300px;
			}					
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>	
			<h1 class="mui-title">个人简历</h1>
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
			<!--上一行为右上角点击跳出div，并且显示二维码、拍照等按钮-->
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-star"></span>
				<span class="mui-tab-label">技能</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-navigate"></span>
				<span class="mui-tab-label">经历</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">项目</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">	
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/html5.png">
							<div class="mui-media-body">
								类别：规范<br/>
								技能：HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD<br/>
								程度：了解<br/>
								<p class='mui-ellipsis'>描述：了解HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/css3.png">
							<div class="mui-media-body">
								类别：框架<br/>
								技能：Jquery、Zepto、AngularJs、Recat、Avalon等<br/>
								程度：熟悉<br/>
								<p class='mui-ellipsis'>描述：了解Jquery、Zepto、AngularJs、Recat、Avalon等</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/ja.png">
							<div class="mui-media-body">
								类别：框架<br/>
								技能：Mui、Yo、Ionic等<br/>
								程度：了解<br/>
								<p class='mui-ellipsis'>描述：了解Mui、Yo、Ionic等</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/angular.png">
							<div class="mui-media-body">
								类别：类库<br/>
								技能：Swiper、Iscroll等<br/>
								程度：熟悉<br/>
								<p class='mui-ellipsis'>描述：熟悉Swiper、Iscroll等</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/react.png">
							<div class="mui-media-body">
								类别：布局<br/>
								技能：Fixed、Fulid、Flex、Responsive<br/>
								程度：精通<br/>
								<p class='mui-ellipsis'>描述：Fixed、Fulid、Flex、Responsive</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/vue.png">
							<div class="mui-media-body">
								类别：程序<br/>
								技能：Javascript原生、Jquery及Zepto插件、AngularJs等<br/>
								程度：精通<br/>
								<p class='mui-ellipsis'>描述：Javascript原生、Jquery及Zepto插件、AngularJs等</p>																
							</div>
						</a>
					</li>	
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/html5.png">
							<div class="mui-media-body">
								类别：规范<br/>
								技能：HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD<br/>
								程度：了解<br/>
								<p class='mui-ellipsis'>描述：了解HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>																
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/css3.png">
							<div class="mui-media-body">
								类别：框架<br/>
								技能：Jquery、Zepto、AngularJs、Recat、Avalon等<br/>
								程度：熟悉<br/>
								<p class='mui-ellipsis'>描述：了解Jquery、Zepto、AngularJs、Recat、Avalon等</p>																
							</div>
						</a>
					</li>					
				</ul>					
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">

			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<ul id="zuihou">		
				</ul>
			</div>
			<div id="tabbar-with-map" class="mui-control-content" >
				<div class="title" >
					<p style="font-size: 18px;">姓名：王小虎</p>					
					<p style="font-size: 18px;">学历：本科</p>
					<p style="font-size: 18px;">联系方式：18868686868</p>					
					<p style="font-size: 18px;">开发经验：两年</p>						
					<p style="font-size: 16px;">自我介绍：My name is Wangxiaohu. I am 25 years old. I am now studying in ** University towards a bachelor degree ofscience, majoring in  chemistry. I think I am an optimistic person because I am always trying to be optimistic, no matter what kind of difficulty I have met with. Of course, I love travelling with my  friends .Speaking of which. I have a large circle of friends. Most of them are my former classmates. They are wise and diligent. We have a lot of common in interests. We support each other in times of difficulties. And as regards my most valuable experience, I suppose it should be traced back to the year before last, when I had myinternship in China Construction Bank where I had learned a lot.</p>
					
				</div>
			</div>
		</div>
		<!--右上角弹出菜单-->		
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" id="paizhao"><span class="mui-icon mui-icon-camera"></span><span class="mui-tab-label"> 拍照</span>
						</li>
						<li class="mui-table-view-cell" id="barcode_scan.html" onclick="clicked('barcode_scan.html',true,true)"><span class="mui-icon mui-icon-bars"></span><span class="mui-tab-label"> 扫描</span>
						</li>
						<li class="mui-table-view-cell" id="xiangce"><span class="mui-icon mui-icon-image" ></span><span class="mui-tab-label"> 相册</span>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/immersed.js"></script>
		<script src="js/shortcut.js"></script>
		<script src="js/update.js"></script>
		<script src="js/aaa.js"></script>
		<!--aaa.js这个js的内容是由于没有加上aaa，会一直显示clicked未找到，后来讲html5 h5这个文件里的js代码全部拷出来一份放在aaa里，才不至于报错-->
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});		
			//有大图div即第二个ajax请求，work.php
		    $.ajax({
		    	async:false,
		        type:'GET',
		        url:'http://www.caffy.online/api/work.php', 
		        dataType:'json',
		        success:function(data){
		            var html ='';
		            for(var i=0;i<data.length;i++){
						html+='<div class="mui-card">'+
							'<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/'+data[i].img+')"></div>'+
							'<div class="mui-card-content">'+
								'<div class="mui-card-content-inner">'+
									'<p>公司：'+data[i].name+'</p>'+
									'<p style="color: #333;">网址：'+data[i].url+'</p>'+
								'</div>'+
							'</div>'+
							'<div class="mui-card-footer" style="overflow:hidden;">'+
								'<a class="mui-card-link" style="overflow:hidden;">职位：'+data[i].posts+'</a>'+
							'</div>'+
						'</div>'	
		            }
		            $("#tabbar-with-chat").html(html);
		        }
		    })	
			//以下为第三个“项目”ajax请求
		    $.ajax({   
		    	async:false,
		        type:'GET',
		        url:'http://www.caffy.online/api/skill.php', 
		        dataType:'json',
		        success:function(data){
		            var html ='';
		            for(var i=0;i<data.length;i++){
		                html +='<li style="text-align:center;background: turquoise;">' + data[i].category + "</li>";
		                html +="<li>技   能：" + data[i].name + "</li>";
		                html +="<li>年   限：" + data[i].time + "</li>";
		                html +="<li>程   度：" + data[i].level + "</li>";
		            }
		            $("#zuihou").html(html);
		        }
		    })		
			
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener( "plusready", onPlusReady, false );
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {		//此函数为调出摄像头拍照函数
				console.log("plusready");				
				// 从相册中选择多张图片 :galleryImgs函数
				var oBtxc=document.getElementById('xiangce');
				oBtxc.onclick=function galleryImgs(){
					// 从相册中选择图片
					console.log("从相册中选择多张图片:");
				    plus.gallery.pick( function(e){
				    	for(var i in e.files){
					    	console.log(e.files[i]);
				    	}
				    }, function ( e ) {
				    	console.log( "取消选择图片" );
				    },{filter:"image",multiple:true});		
				}				
				// 拍照函数：captureImage
				var oBt=document.getElementById('paizhao');
				oBt.onclick=function captureImage(){
					var cmr = plus.camera.getCamera();
					var res = cmr.supportedImageResolutions[0];
					var fmt = cmr.supportedImageFormats[0];
					console.log("Resolution: "+res+", Format: "+fmt);
					cmr.captureImage( function( path ){
							alert( "Capture image success: " + path );  
						},
						function( error ) {
							alert( "Capture image failed: " + error.message );
						},
						{resolution:res,format:fmt}
					);			
				}						
			}
		</script>		
	</body>
</html>